<template>
    <div class="power-chart-container">
        <div ref="chartContainer" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'PowerConsumptionChart',
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initChart();
            }, 500);
        });
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        generateSineWave(amplitude, frequency, phaseShift, harmonic = 1) {
            const data = [];
            const points = 200;
            for (let i = 0; i <= points; i++) {
                const x = (i / points) * 4 * Math.PI;
                // 基波 + 谐波
                const value = amplitude * Math.sin(frequency * x + phaseShift) * Math.sin(harmonic * x);
                data.push([x, value]);
            }
            return data;
        },
        initChart() {
            // 初始化图表
            this.chart = echarts.init(this.$refs.chartContainer);
            const dataA = this.generateSineWave(1, 1, 0);
            const dataB = this.generateSineWave(1, 1, (-2 * Math.PI) / 3);
            const dataC = this.generateSineWave(1, 1, (2 * Math.PI) / 3);
            const option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    top: '12%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    nameLocation: 'middle',
                    nameGap: 30,
                    axisLabel: {
                        formatter: function (value) {
                            return (value / Math.PI).toFixed(0) + 'π';
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#CBCED5',
                            width: 1.5,
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    min: -1.2,
                    max: 1.2,
                    splitNumber: 8,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(93, 131, 201, 0.15)',
                        },
                    },
                    axisTick: {
                        inside: true,
                    },
                },
                series: [
                    {
                        name: '谐波相位',
                        type: 'line',
                        symbolSize: 12,
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            width: 4,
                            color: '#F97A57',
                        },
                        data: dataA,
                    },
                    {
                        name: '谐波相位',
                        type: 'line',
                        symbolSize: 12,
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            width: 4,
                            color: '#1EC7FF',
                        },
                        data: dataB,
                    },
                    {
                        name: '谐波相位',
                        type: 'line',
                        symbolSize: 12,
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            width: 4,
                            color: '#91DF5D',
                        },
                        data: dataC,
                    },
                ],
            };

            this.chart.setOption(option);
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
    },
};
</script>

<style scoped>
.power-chart-container {
    width: 100%;
    height: 500px;
    background: #fff;
    padding: 16px;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>
